<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		startCiHuiLiangApi
	} from '/api/request.js';
	const props = defineProps({});
	const platform = ref({});
	onShow(async () => {
		platform.value = uni.getStorageSync('platform');
	});
	const goback = () => {
		uni.navigateBack();
	};
	const showPage = async () => {
		let res = await startCiHuiLiangApi();
		if (res.code != 1) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: '/pages/grammar/xunlian?id=' + res.data.id
		});
	};
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 词汇量测试 </view>
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
		</view>
		<view class="body">
			<view class="title">
				词汇量测试
			</view>
			<view class="label">
				花几分钟测试一下，测试你的词汇量水平
			</view>
			<image src="/static/img/cihuiliang/body.png" class="xiaohais"></image>

		</view>
		<view class="btn uni-row" @click="showPage">
			开始测试
		</view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			padding: 120rpx 28rpx 40rpx;
			text-align: center;

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}

			.label {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.xiaohais {
				width: 615rpx;
				height: 454rpx;
				margin-top: 80rpx;
			}

		}

		.btn {
			position: fixed;
			z-index: 33;
			left: 70rpx;
			right: 70rpx;
			bottom: 70rpx;
			justify-content: center;
			font-size: 32rpx;
			color: #FFFFFF;
			height: 88rpx;
			background: #9561F3;
			border-radius: 16rpx;
		}
	}
</style>